<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CalendarCustom.aspx.cs" Inherits="DNJPanel_Custom" %>
<%@ Register Assembly="Org.Eurekaa.DNJ" Namespace="Org.Eurekaa.DNJ.WebControls" TagPrefix="dnj" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>DNJ Panel Demo (Custom)</title>
  
    <script type="text/javascript" src="../dnj/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../dnj/js/jquery.nyroModal-1.5.0.min.js"></script>
    <script type="text/javascript" src="../dnj/config/DNJResources.axd?conf=jsonmap.config"></script>    
    
    
    <style type="text/css">

    .dnj-indicator
    {
        border:0px;
        background: #a00;
        color:#fff;
        position:absolute;
        top:0px;
        right:0px;
        width:150px;
        font:700 11px verdana;
        padding:2px 5px;
    }
    
    </style>      
	<script type="text/javascript">   
        $(document).ready(function() {    
        
        //Creating a custom ajax indicator (this will mimic the GMail "loading" indicator)
        var indicator = $('<div>Loading</div>').addClass('dnj-indicator').hide();
        $('body').append(indicator);
        $(window).scroll(function() {
            indicator.css('top', $(this).scrollTop() + "px");
        });                                         


	    // Custom DNJ Panel initialisation	    
	    // The example bellow shows how we can add some visual effects for loading, waiting, errors ...etc
	    //        
        $.DNJ({
            beforeCallBack : function(sender)
                {
                    indicator.show();
                    sender.fadeTo("fast", 0.50);
                }, 
            afterCallBack : function(sender)
                {
                    indicator.hide();
                    sender.fadeTo("fast", 1.00);                    
                }
        }); 
        
   });     
	</script>      
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>Custom use of DNJ Panel</h1>
    <p>
    This page contains a standard .Net calendar control wrapped into a DNJPanel.<br />
    the DNJ Panel automatically transforms the calendar into an ajax control, no more postbacks :) <br />
    Here we added some visual effects to DNJPanel : a loading message on top right and a fadeIn/Out effect (see page source).<br /><br />
    <b>Note : we added a sleep(1000) on calendar code behind to force it waiting while selecting a date to allow you to see visual effects</b>
    </p>    
        <dnj:DNJPanel ID="DNJPanel1" runat="server">
            <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="White"
                BorderWidth="1px" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="190px"
                NextPrevFormat="FullMonth" Width="350px" OnSelectionChanged="Calendar1_SelectionChanged">
                <SelectedDayStyle BackColor="#333399" ForeColor="White" />
                <TodayDayStyle BackColor="#CCCCCC" />
                <OtherMonthDayStyle ForeColor="#999999" />
                <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" VerticalAlign="Bottom" />
                <DayHeaderStyle Font-Bold="True" Font-Size="8pt" />
                <TitleStyle BackColor="White" BorderColor="Black" BorderWidth="4px" Font-Bold="True"
                    Font-Size="12pt" ForeColor="#333399" />
            </asp:Calendar>
        </dnj:DNJPanel>
        &nbsp;</div>
    </form>
</body>
</html>
